<template>
  <div class="register">
    <section class="form_container">
      <div class="manage_tip">
        <span class="title">资金后台管理系统</span>
      </div>

      <el-form-renderer
        label-width="100px"
        :content="content"
        ref="registerForm"
        class="registerForm"
      >
        <el-button
          @click="submitForm(registerForm)"
          type="primary"
          class="submit_btn"
          >注册</el-button
        >
      </el-form-renderer>
    </section>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "../utils/http";
const registerForm = ref("");
import { ElMessage } from "element-plus";
const validatePass2 = (rule, value, callback) => {
  let params = registerForm.value.getFormValue();
  if (value !== params.password) {
    callback(new Error("两次输入密码不一致!"));
  } else {
    callback();
  }
};

const content = [
  {
    type: "input",
    id: "name",
    label: "用户名",

    rules: [
      { required: true, message: "用户名不能为空", trigger: "blur" },
      { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" },
    ],
  },
  {
    type: "input",
    id: "email",
    label: "邮箱",
    rules: [
      {
        type: "email",
        required: true,
        message: "邮箱格式不正确",
        trigger: "blur",
      },
    ],
  },
  {
    type: "input",
    id: "password",
    el: {
      type: "password",
    },
    label: "密码",
    rules: [
      { required: true, message: "密码不能为空", trigger: "blur" },
      { min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur" },
    ],
  },
  {
    type: "input",
    id: "password2",
    label: "确认密码",
    el: {
      type: "password",
    },
    rules: [
      { required: true, message: "确认密码不能为空", trigger: "blur" },
      {
        min: 6,
        max: 30,
        message: "长度在 6 到 30 个字符",
        trigger: "blur",
      },
      { validator: validatePass2, trigger: "blur" },
    ],
  },
  {
    type: "select",
    id: "identity",
    label: "请选择身份",
    options: [
      {
        label: "管理员",
        value: "manager",
      },
      {
        label: "员工",
        value: "employee",
      },
    ],
  },
];
const submitForm = async (formEl) => {
  if (!formEl) return;
  let valid = await formEl.methods.validate();

  if (valid) {
    try {
      let params = registerForm.value.getFormValue();
      let { code, data } = await axios.post("/api/users/register", params);
      if (code != 200) {
        // 注册成功
        ElMessage({
          message: data.message || "未知错误",
          type: "error",
        });
        return;
      }
      // 注册成功
      ElMessage({
        message: "注册成功！",
        type: "success",
      });

      console.log("submit!");
    } catch (error) {}
  }
};
</script>

<style lang="scss" scoped>
.registerForm {
  margin: 0 auto;
  margin-top: 20px;
  background-color: #fff;
  padding: 20px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
}
.register {
  width: 100%;
  height: 100%;
  background: url(../assets/bg.jpg) no-repeat center center;
  background-size: 100% 100%;
}
.form_container {
  width: 370px;
  height: 260px;
  position: absolute;
  top: 10%;
  left: 34%;
  padding: 25px;
  border-radius: 5px;
  text-align: center;
}
.form_container .manage_tip .title {
  font-family: "Microsoft YaHei";
  font-weight: bold;
  font-size: 26px;
  color: #fff;
}

.submit_btn {
  width: 100%;
}
</style>
